<template>
  <div class="radio-maybelike">
    <!-- 推荐电台标题 -->
    <h3 class="u-hd3">
      <span class="f-fl">你可能也喜欢</span>
    </h3>
    <!-- 推荐电台列表 -->
    <ul class="m-rctlist f-cb">
      <li>
        <div class="cver u-cover u-cover-3">
          <a href="/djradio?id=794652664"
            ><img
              src="http://p1.music.126.net/EUZ8CgKs7Gm1eomlLXcUUQ==/109951164931803471.jpg?param=50y50"
          /></a>
        </div>
        <div class="info">
          <p class="f-thide">
            <a
              class="sname f-fs1 s-fc0"
              href="/djradio?id=794652664"
              title="徐疏雨 | 金鱼电台"
              >徐疏雨 | 金鱼电台</a
            >
          </p>
          <p>
            <span class="by s-fc4">by</span>
            <a
              class="nm nm f-thide s-fc3"
              href="/user/home?id=325972298"
              title="徐疏雨"
              >徐疏雨</a
            >
            <sup class="icn u-icn2 u-icn2-music2 "></sup>
          </p>
        </div>
      </li>
      <li>
        <div class="cver u-cover u-cover-3">
          <a href="/djradio?id=792958421"
            ><img
              src="http://p1.music.126.net/5ye8098f7wkGCF8tPRthrw==/109951164271552628.jpg?param=50y50"
          /></a>
        </div>
        <div class="info">
          <p class="f-thide">
            <a
              class="sname f-fs1 s-fc0"
              href="/djradio?id=792958421"
              title="我向阳君很甜"
              >我向阳君很甜</a
            >
          </p>
          <p>
            <span class="by s-fc4">by</span>
            <a
              class="nm nm f-thide s-fc3"
              href="/user/home?id=503833386"
              title="我向阳君很甜"
              >我向阳君很甜</a
            >
            <sup class="icn u-icn2 u-icn2-music2 "></sup>
          </p>
        </div>
      </li>
      <li>
        <div class="cver u-cover u-cover-3">
          <a href="/djradio?id=792874366"
            ><img
              src="http://p1.music.126.net/orb9HspMaiC0EZGYgKFW4Q==/109951163904051795.jpg?param=50y50"
          /></a>
        </div>
        <div class="info">
          <p class="f-thide">
            <a
              class="sname f-fs1 s-fc0"
              href="/djradio?id=792874366"
              title="MrYang的专属电台"
              >MrYang的专属电台</a
            >
          </p>
          <p>
            <span class="by s-fc4">by</span>
            <a
              class="nm nm f-thide s-fc3"
              href="/user/home?id=1458265561"
              title="MrYang-杨家成音乐"
              >MrYang-杨家成音乐</a
            >
            <sup class="icn u-icn2 u-icn2-music2 "></sup>
          </p>
        </div>
      </li>
      <li>
        <div class="cver u-cover u-cover-3">
          <a href="/djradio?id=792725389"
            ><img
              src="http://p1.music.126.net/B_4NHL83qpCq2HLZ1lGydg==/109951164221552610.jpg?param=50y50"
          /></a>
        </div>
        <div class="info">
          <p class="f-thide">
            <a
              class="sname f-fs1 s-fc0"
              href="/djradio?id=792725389"
              title="念慈杂货铺✨"
              >念慈杂货铺✨</a
            >
          </p>
          <p>
            <span class="by s-fc4">by</span>
            <a
              class="nm nm f-thide s-fc3"
              href="/user/home?id=71866227"
              title="邹念慈"
              >邹念慈</a
            >
            <sup class="icn u-icn2 u-icn2-music2 "></sup>
          </p>
        </div>
      </li>
      <li>
        <div class="cver u-cover u-cover-3">
          <a href="/djradio?id=527670628"
            ><img
              src="http://p1.music.126.net/Qp0GyMTt3pxmUV60iKULdA==/109951163464146231.jpg?param=50y50"
          /></a>
        </div>
        <div class="info">
          <p class="f-thide">
            <a
              class="sname f-fs1 s-fc0"
              href="/djradio?id=527670628"
              title="网瘾少女叽"
              >网瘾少女叽</a
            >
          </p>
          <p>
            <span class="by s-fc4">by</span>
            <a
              class="nm nm f-thide s-fc3"
              href="/user/home?id=274038268"
              title="LANXXXXYU"
              >LANXXXXYU</a
            >
            <sup class="icn u-icn2 u-icn2-music2 "></sup>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.u-hd3 {
  position: relative;
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
}
.f-fl {
  float: left;
}
.m-rctlist {
  margin-bottom: 25px;
}
.m-rctlist li {
  float: left;
  width: 200px;
  height: 50px;
  margin-bottom: 15px;
  line-height: 24px;
}
.u-cover {
  position: relative;
  display: block;
}
.m-rctlist .cver {
  margin-right: -60px;
}
.m-rctlist .cver,
.n-rctlist .cver img {
  float: left;
  width: 50px;
  height: 50px;
}
.m-rctlist .info {
  margin-left: 60px;
  line-height: 24px;
}
.m-rctlist .by {
  float: left;
}
.m-rctlist .nm {
  float: left;
  max-width: 106px;
  margin: 0 2px 0 4px;
}
.u-icn2-music2 {
  width: 12px;
  height: 13px;
  background-position: -110px -190px;
}
.m-rctlist sup {
  margin-top: -1px;
}
</style>
